import {
  CloseOutlined,
  EditOutlined,
  EllipsisOutlined,
  AntDesignOutlined,
  WechatWorkOutlined
} from '@ant-design/icons';
import {
  Avatar,
  Button,
  Card,
  Col,
  Form,
  Input,
  Row,
  Space,
  message,
} from 'antd';
import React, { useEffect, useState } from 'react';
import AiAgentDesign from './../AiAgentDesign';
import { getAgentPagetList } from './service';
const { Meta } = Card;

interface AgentListProps {
  currentRecord: any;
  setCurrentContent: (content: string) => void;
  addCurrentRecord: (record: any) => void;
  openDesign: () => void;
  openChat: (record: any) => void;
  switchContent: (content: string, record?: any) => void;
}

export default ({
  currentRecord,
  setCurrentContent,
  addCurrentRecord,
  openDesign,
  openChat,
  switchContent
}: AgentListProps) => {
  const [showDesign, setShowDesign] = React.useState(false);
  const [aiAgentList, setAiAgentList] = useState([])

  // 设计按钮
  const design = () => {
    setShowDesign(true);
  };

  useEffect(() => {
    // 查询协议
    let params = {
      current: '1',
      pageSize: '99',
    }
    getAgentPagetList(params).then(res => {
      console.log(res);
      if (res && (res.code == '000000' || res.code == 0)) {
        console.log(res?.data)
        setAiAgentList(res?.data)
      }
    })
  }, [])

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  const [form] = Form.useForm();

  return (
    <div>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        <Card>
          <Form form={form} name="advanced_search" onFinish={onFinish}>
            <Row gutter={24}>
              <Col span={8} key="name">
                <Form.Item
                  label="名称"
                  rules={[
                    {
                      required: true,
                      message: 'Input something!',
                    },
                  ]}
                >
                  <Input placeholder="placeholder" />
                </Form.Item>
              </Col>
              <Col span={8} key="type">
                <Form.Item
                  label="类型"
                  rules={[
                    {
                      required: true,
                      message: 'Input something!',
                    },
                  ]}
                >
                  <Input placeholder="placeholder" />
                </Form.Item>
              </Col>
              <Col span={8} key="actions">
                <div style={{ textAlign: 'right' }}>
                  <Space size="small">
                    <Button
                      onClick={() => {
                        form.resetFields();
                      }}
                    >
                      重置
                    </Button>
                    <Button type="primary" htmlType="submit">
                      搜索
                    </Button>
                  </Space>
                </div>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card
          title="智能体"
          extra={
            <Button type="primary" onClick={() => setCurrentContent && setCurrentContent("edit")}>
              新增
            </Button>
          }
        >
          {aiAgentList && aiAgentList.length > 0 ? (
            <Space size="middle" style={{ display: 'flex', flexWrap: 'wrap' }}>
              {aiAgentList.map((aiAgent) => (
                <Card
                  key={aiAgent.serialNo}
                  style={{ width: 300 }}
                  actions={[
                    <AntDesignOutlined key="setting"
                      onClick={() => {
                        setCurrentContent && setCurrentContent("design");
                      }}
                    />,
                    <EditOutlined key="edit"
                      onClick={() => {
                        switchContent("edit", aiAgent);
                      }}
                      title="编辑"
                    />,
                    <WechatWorkOutlined
                      key="ellipsis"
                      onClick={() => {
                        switchContent("chat", aiAgent);
                      }}
                      title="聊天"
                    />,
                  ]}
                >
                  <Meta
                    avatar={
                      <Avatar src={aiAgent.iconUrl} />
                    }
                    title={aiAgent.name}
                    description={
                      <div style={{
                        display: '-webkit-box',
                        WebkitLineClamp: 2,
                        WebkitBoxOrient: 'vertical',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        lineHeight: '1.4',
                        height: '2.8em' // 2行的高度 (1.4 * 2)
                      }}>
                        {aiAgent.description}
                      </div>
                    }
                  />
                </Card>
              ))}
            </Space>
          ) : (
            <div style={{
              width: '100%',
              height: '200px',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              color: '#999',
              fontSize: '16px'
            }}>
              No data
            </div>
          )}
        </Card>
      </Space >
      {
        showDesign ? (
          <div
            style={{
              width: '99vw',
              height: '100vh',
              position: 'fixed',
              padding: '20px',
              top: 0,
              left: 0,
              backgroundColor: '#fff',
              zIndex: 999,
            }}
          >
            <CloseOutlined
              onClick={() => {
                setShowDesign(false);
              }}
              style={{
                fontSize: '18px',
                position: 'fixed',
                top: 45,
                right: 18,
                zIndex: 99999,
              }}
            />
            <AiAgentDesign setCurrentContent={setCurrentContent} />
          </div >
        ) : null
      }
    </div >
  );
};
